<template>
  <!-- 催收执行页-案件信息模块-银行卡信息 -->
  <section class="component bank-info">
    <data-box :data="dataSet">
      <template slot="columns">
        <el-table-column prop="deductionName" label="银行卡账户姓名" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="cardNumber" label="银行卡账号" :formatter="(row)=>$filter.encryptBankCardFour(row.cardNumber)" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="depositBank" label="开户行名称" show-overflow-tooltip :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="personalSource" label="客户来源" :min-width="$helper.getColumnWidth(3)"></el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from "~/core/decorator";
import DataBox from '~/components/common/data-box.vue';
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import { Emit, Prop, Watch } from "vue-property-decorator";

@Component({
  components: {
    DataBox
  },
})
export default class BankInfo extends Vue {
   @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Prop()
  private caseId: string
  private dataSet: any[] = [];


  public queryInfo(id: string) {
    this.caseOperatorPageService
    .personalBankInfo(this.caseId)
    .subscribe(data => {
          this.dataSet = data
        });
  }

  private activated() {
    if (this.caseId) this.queryInfo(this.caseId)
  }

}
</script>

<style lang="less" scoped>
</style>
